<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
  html,body {
    font-size: 1.2rem;
    background: #ffffff;
    color: #333333 !important
  }

  .h10{
    width: 100%;
    height: 0.5rem;
    display: -webkit-box;
    clear: both;
    background: #f5f5f5
  }
    .aui-active .aui-bar-tab-label{
      color: #f5a51c
    }


    [v-cloak] {
        display: none;
    }
    header,.aui-bar,.aui-bar-nav{
      font-size: 1.2rem;
      color: #333 !important;
      background:#fff;
      box-shadow: 0rem 0rem 0.8rem 0rem
		rgba(126, 126, 126, 0.52);
    border-bottom: none;
    margin-top: 0 !important;
    }
    .aui-pull-left{
      font-size: 1.2rem;
    }
    .aui-pull-left .aui-iconfont{
      font-size: 1.2rem;

    }
    .aui-searchbar{
      background-color: transparent !important;
      height:4.4rem;
    }
    .aui-searchbar-input{
      height:2.8rem;
      line-height: 2.8rem;
      padding-left:0.9rem;
      margin: 0 0 0 1.3rem;
      border-radius: 0.3rem;
      position: relative;
    }
    .aui-bar-nav .aui-title{
      right: 4rem;
      left: 0rem;
    }
    body {background: #F6F6F9;color: #333;margin: 0 auto;font-weight: normal;}
    ul,ol{list-style: none;padding: 0px;margin: 0px;;}


    /*滚动条样式*/
    .scrollbar-none::-webkit-scrollbar {/*滚动条宽度设置*/
        width: 0px;height: 0;
    }

    /*多个一行三个*/
    .w-3{width:33.33%;  float:left; padding:.6rem .4rem; box-sizing: border-box; position: relative;}
    .w-3:nth-child(3n+1){padding-left:0; padding-right:.8rem}
    .w-3:nth-child(3n){ padding-left: .8rem;padding-right:0;}

    /*商品分类页*/
    .category-top .search{border-bottom:1px solid #e8e8e8;position:fixed; left:0; top:0; right:0; z-index: 1; background:#F6F6F9}
    .menu-left,.menu-right{position:fixed; left:0;top:0rem; overflow-y: scroll;z-index: 10;}
    .menu-right #loading{left:5rem; top:6.7rem;}

    .menu-left{background:#F6F6F9;}
    .menu-left ul li{
      box-sizing: border-box;
      width: 9rem;
      text-align: center;
      font-size: 1.3rem;
      color: #2e2d2d;
      background: #f6f6f6;
      height: 5rem;
      line-height: 5rem;
    }
    .menu-left ul li.active{background:#fff; position:relative;font-size: 1.5rem;font-weight: 600;}
    .menu-left ul li.active:before{content: " ";position: absolute;display: block;width: 0.4rem;height: 30%;background: #ed6a20;top: 35%;left: 0;}
    .menu-right{background:#fafafa; position:inherit; margin-left:9rem; margin-top: 4.4rem; right:0; bottom:0; left: 9rem}
    .menu-right ul{overflow: hidden;}
    .menu-right ul.class_sec1_list_content li{text-align: center;}
    .menu-right ul.class_sec1_list_content li a{display:block; position: absolute; left:.3rem; top:.7rem; bottom:.7rem; right:.3rem;}
    .menu-right ul.class_sec1_list_content li:nth-child(3n+1) a{left:0; right:.7rem;}
    .menu-right ul.class_sec1_list_content li:nth-child(3n) a{right:0; left: .7rem;}
    .menu-right ul.class_sec1_list_content li span{display:block;height:2.6rem; line-height: 2.6rem; overflow: hidden; text-align: center;font-size:1.2rem;color:#545454; }
    .menu-right ul.class_sec1_list_content li img{width:5rem; height: auto;margin:0 auto;}
    .mune-no-img img{display:none}
    .mune-no-img span{border:1px solid #efefef; color:#555; border-radius: 4px;}
    header, .aui-bar-nav{
      padding-top:0;
    }
    .aui-searchbar .aui-iconfont{
      line-height: 2.8rem;
      margin-right: 1rem;
      color: #9e9e9e !important;
      font-size: 1.6rem;
    }
    .aui-searchbar-input input{
      height: 2.8rem;
      font-size: 1.3rem;
    }
    .aui-bar-nav .aui-pull-right.class_nav{
      top:1.3rem;
      right:1.3rem;
      padding:0;
      height:1.7rem;
      line-height: 1.7rem;
    }
    .class_nav img{
      height:1.7rem;
    }
    .class_nav span{
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      width: 1.2rem;
    	height: 1.2rem;
      line-height: 1.2rem;
    	background-color: #ed6a20;
      font-size:1rem;
      color:#fff;
      border-radius: 100%;
    }
    .class_nav_title .shao{
      position: absolute;
      width:1.3rem;
      top:0.75rem;
      right:0.75rem;
    }
    .class_sec1_banner{
      padding: 1.55rem 1.3rem 1rem 1rem;
    }
    .menu-right ul.class_sec1_list1{
      padding:0 1.3rem 0 1rem;
    }
    .menu-right ul.class_sec1_list1>li{
      background-color: #ffffff;
	    box-shadow: 0rem 0.1rem 0.85rem 0rem
      rgba(126, 126, 126, 0.5);
      border-radius: 0.07rem;
      margin-bottom:1rem;
    }
    .class_sec1_list_content_title{
      text-align: center;
      padding:1rem 0;
    }
    .class_sec1_list_content_title span{
      position: relative;
      font-size: 1.2rem;
      color: #5b5b5b;
    }
    .class_sec1_list_content_title span::before{
      content: '';
      position: absolute;
      top:50%;
      left:-2.85rem;
      width: 2rem;
    	height: 0.1rem;
    	background-color: #e0e0e0;
    }
    .class_sec1_list_content_title span::after{
      content: '';
      position: absolute;
      top:50%;
      right:-2.85rem;
      width: 2rem;
      height: 0.1rem;
      background-color: #e0e0e0;
    }

</style>
<body>
<div id="app" v-cloak>

  <header id="header_top" class="aui-bar aui-bar-nav " style="position:fixed;top:0;height:4.4rem;" >
    <div class="aui-title class_nav_title">
      <div class="aui-searchbar" id="search">
          <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()" style="background:#f6f6f6">
              <i class="aui-iconfont aui-icon-search"></i>
              <form action="javascript:search();">
                  <input type="search" placeholder="请输入搜索内容" id="search-input">
              </form>
              <div class="shao">
                <img src="../../image/search_icon1.png" alt="">
              </div>
          </div>

      </div>

    </div>
    <a class="aui-pull-right aui-btn class_nav">
        <img src="../../image/class/share_index_nav3.png" alt="">
        <span>5</span>
    </a>
  </header>

   <div class="aui-refresh-content">
    <div class="con1">

  			<div class="menu-left scrollbar-none" id="sidebar">
  					<ul>
  						<li :class="index==0?'active':''" v-for="(item1,index) in cateList">{{item1.cate_name}}</li>
  					</ul>
  			</div>

  			<section class="menu-right padding-all j-content" v-for="(cate,index) in cateList" :style="index==0?'':'display:none'">
          <div class="class_sec1_banner">
            <img :src="cate.cate_logo" alt="" width="100%">
          </div>
          <div class="class_sec1_list">
            <ul class="class_sec1_list1" v-if="cate.child_list.length > 0 ">
              <li v-for="items2 in cate.child_list">
                <div class="class_sec1_list_content_title">
                  <span>{{items2.cate_name}}</span>
                </div>
                <ul class="class_sec1_list_content" v-if="items2.child_list.length > 0 ">
        					<li class="w-3"  @click="goClassify(items3.cate_id)" v-for="items3 in items2.child_list">
        						<img :src="items3.cate_logo" />
                    <span>{{items3.cate_name}}</span>
                  </li>
        				</ul>
              </li>
            </ul>
          </div>
  			</section>
  		</div>
  </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>

<script type="text/javascript">
  var app;
  apiready = function(){

    app = new Vue({
        el: '#app',
        data: {
          cateList:[],

        },
        created: function() {
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });
          var $_this=this;
          $_this.getCateList();

        },
        methods: {
          getCateList:function(){
            var $_this=this;
            const data = {

            }
            Axios.post(window.Url.goods_cate_tree,data).then(function(res){
              if(res!==''){
                $_this.cateList=res;
                $_this.$nextTick(function () {
                  classTab();
                })

              }else{
                api.toast({
                    msg:res,
                    duration: 2000,
                    location: 'bottom'
                });
              }
            }).catch((err) => {
              api.alert({ msg: JSON.stringify(err) });
            })
          },
          goClassify:function(cateId){
            console.log(cateId);
            api.openWin({
                  name: 'classClassify',
                  url: './class_classify.html',
                  pageParam: {
                      cateId:cateId
                  }
            });
          }

        },
        mounted: function () {
          api.hideProgress();
          setRefresh();

        }
      })

  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  //跳转商品分类页面
  // function goClassify(cateId){
  //   console.log(cateId);
  //   api.openWin({
  //       name: 'classClassify',
  //       url: './class_classify.html',
  //       pageParam: {
  //           cateId:cateId
  //       }
  //   });
  // }

  //搜索
  function doSearch(){
      var searchValue = document.getElementById("search-input").value;
      if(searchValue){
          api.toast({
              msg: searchValue,
              duration: 2000,
              location: 'bottom'
          });
      }
  }

  //商品分类切换
  function classTab(){
    $('#sidebar ul li').click(function() {
          $(this).addClass('active').siblings('li').removeClass('active');
          var index = $(this).index();
          $('.j-content').eq(index).show().siblings('.j-content').hide();
    })
  }


</script>
